import MyModal from "@/components/MyModal";
import { editDictionaryItem } from "@/services/dictionary";
import { useBoolean } from "ahooks";
import { Form, Input, message } from "antd";
import { useEffect } from "react";
const { TextArea } = Input;
export default ({ open, close, refresh,groupId,editInfo }) => {
  const [form] = Form.useForm();
  const [loading, { toggle: toggleLoading }] = useBoolean(false);

  const onOk = async () => {
    const values = await form.validateFields();
    values.slug = values.name;
    values.groupId = groupId;
    if(editInfo.id){
      values.id= editInfo.id;
    }
    toggleLoading();
    try {
      await editDictionaryItem(values);
      message.success(editInfo.id?'修改成功':"新增成功");
      close();
      refresh();
    } finally {
      toggleLoading();
    }
  };
  useEffect(()=>{
    form.setFieldsValue(editInfo);
  },[open])

  return (
    <MyModal
      title={editInfo.id?"修改分类信息":"新增分类信息"}
      open={open}
      close={close}
      onOk={onOk}
      confirmLoading={loading}
    >
      <Form form={form} wrapperCol={{ span: 24 }} layout="vertical">
        <Form.Item
          name="name"
          rules={[
            {
              required: true,
            },
          ]}
          label="分类名称"
        >
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item
          name="description"
          rules={[
            {
              required: true,
            },
          ]}
          label="分类描述"
        >
          <TextArea placeholder="请输入" />
        </Form.Item>
      </Form>
    </MyModal>
  );
};
